<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
			/*方法一，只能绑定一个*/
				var btn01=document.getElementById("btn01");
				btn01.onclick=function(){
					alert("1");
				};
			/*方法二，可以绑定多个,不支持IE8及以下*/
				var btn02=document.getElementById("btn02");
				btn02.addEventListener("click",function(){
					alert("2");
				},false);
				btn02.addEventListener("click",function(){
					alert("3");
				},false);
			/*方法三，可以绑定多个,仅支持IE浏览器*/
				/*var btn03=document.getElementById("btn03");
				btn03.attachEvent("onclick",function(){
					alert("2");
				});*/
			/*方法三和方法四结合*/
				var btn04=document.getElementById("btn04");
				/*定义函数，为指定元素绑定函数
				 * 参数：obj对象，eventStr事件，callback回调函数 
				 */
				function bind(obj,eventStr,callback){
					if(obj.addEventListener){
						obj.addEventListener(eventStr,callback,false);
					}else{
						/*obj.attachEvent("on"+eventStr,callback);*//*直接写callback由IE浏览器调用会返回window元素，改成下面*/
						obj.attachEvent("on"+eventStr,function(){
							callback.call(obj);
						});
					}
				}
				bind(btn04,"click",function(){
					alert(this);/*button元素*/
				})
			}
		</script>
	</head>
	<body>
		<button id="btn01">按钮一(都支持)</button>
		<button id="btn02">按钮二（IE8及以下不支持）</button>
		<button id="btn03">按钮三(仅IE浏览器支持)(已注释掉)</button>
		<button id="btn04">按钮四（都支持（要注释掉方法二IE才不会报错）</button>
	</body>
</html>
